<template>
  <div class="container">
    <!-- 标题栏 -->
    <van-nav-bar :title="title"
                 fixed
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>
    <!-- 页面部分内容写在content盒子内 -->
    <div class="content">
      <van-cell-group>
        <van-field v-model="packageName"
                   label="套餐名称"
                   center
                   clearable
                   placeholder="请填写套餐名称" />
      </van-cell-group>
      <button class="add-btn"
              @click="add">新增</button>
      <button class="add-btn"
              @click="save">保存</button>
      <!-- 套餐列表 -->
      <div class="list">
        <PrescriptionCard @del="delIcon"
                          showDelIcon
                          :prescriptionList="prescriptionList"></PrescriptionCard>
      </div>
      <div class="empty" v-if="prescriptionList.length === 0">
        <img src="@/assets/home/empty.png" alt="" />
      </div>
    </div>

    <!-- 新建药方弹出层 -->
    <van-popup :closeable="closeable"
               v-model="show">
      <div class="info">
        <van-field label="药物类型"
                   label-width="5.5em"
                   @focus="fieldSelect"
                   @click="drugTypeShow = true"
                   v-model.trim="prescription_params.drug_type"
                   placeholder="请选择药物类型" />
        <van-field label="具体药物"
                   label-width="5.5em"
                   @focus="fieldSelect"
                   @click="drugListShowFun"
                   v-model.trim="prescription_params.drug_name"
                   placeholder="请选择具体药物" />
        <van-field label="给药途径"
                   label-width="5.5em"
                   v-model.trim="prescription_params.drug_way"
                   placeholder="请输入给药途径" />
        <van-field label="剂量及频率"
                   label-width="5.5em"
                   v-model.trim="prescription_params.frequency"
                   placeholder="请输入剂量及频率" />
      </div>
      <button class="ok"
              @click="addDrug">确定 </button>
    </van-popup>

    <!-- 药物类型弹出层 -->
    <van-popup v-model="drugTypeShow"
               round
               position="bottom">
      <van-picker title="药物类型"
                  show-toolbar
                  :columns="drugType_List.map(it=> it.antinausea_drug)"
                  @confirm="drugTypeConfirm"
                  @cancel="drugTypeShow = false" />
    </van-popup>

    <!-- 具体药物弹出层 -->
    <van-popup v-model="drugListShow"
               round
               position="bottom">
      <van-picker title="具体药物"
                  show-toolbar
                  :columns="drug_List.map(it=> it.drug_name)"
                  @confirm="drugListConfirm"
                  @cancel="drugListShow = false" />
    </van-popup>

  </div>
</template>

<script>
import { drugType, drugList, addPackage, editPackage } from '@/api/medical'
import PrescriptionCard from '@/views/components/PrescriptionCard'
export default {
  components: { PrescriptionCard },
  name: '',
  data () {
    return {
      title: '套餐配置',
      closeable: true,
      drugTypeShow: false,
      drugListShow: false,
      packageName: '',
      show: false,
      prescription_params: {
        id: '',
        drug_type: '', // 类型
        type_id: '',
        drug_name: '', // 阿司匹林
        drug_way: '', // 口服
        frequency: '' // 3次/日
        // state: '-1' // 1 提交：1 暂不提交：-1
      },
      drugType_List: [], // 药物类型
      drug_List: [], // 药物列表
      prescriptionList: []
    }
  },
  created () {
    if (this.$route.query.event === 'edit') {
      this.title = '套餐修改'
      this.packageName = this.$route.query.name
      this.prescriptionList = JSON.parse(this.$route.query.drug_json)
    }
  },
  methods: {
    // 保存
    async save () {
      if (!this.packageName) return this.$toast.fail('套餐名称不能为空')
      if (this.prescriptionList.length === 0) return this.$toast.fail('请至少新增一个药方')
      const _p = {
        name: this.packageName,
        package_json: JSON.stringify(this.prescriptionList)
      }
      if (this.$route.query.event === 'edit') { // 修改
        return this.edit(_p) // 执行修改接口
      }
      const { code, msg } = await addPackage(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('新增成功')
      this.$router.back()
    },
    // 修改套餐
    async edit (_p) {
      _p.id = this.$route.query.id
      const { code, msg } = await editPackage(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('修改成功')
      this.$router.back()
    },
    // 删除药方
    async delIcon (ins) {
      this.prescriptionList.splice(ins, 1)
    },
    // 获取药物类型
    async drugType () {
      const { data, code, msg } = await drugType()
      if (code !== 1) return this.$toast.fail(msg)
      this.drugType_List = data
    },
    // 根据 type_id 获取药物列表
    async drugList () {
      const type_id = this.prescription_params.type_id
      const { data, msg, code } = await drugList({ type_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.drug_List = data
    },
    // 确认药物列表选择
    drugListConfirm (e) {
      this.prescription_params.drug_name = e
      this.drugListShow = false
    },
    // 确认药物类型选择
    drugTypeConfirm (e, index) {
      this.prescription_params.drug_type = e
      this.prescription_params.type_id = this.drugType_List[index].id
      this.drugTypeShow = false
      this.drugList()
    },
    // 选择药物弹出
    drugListShowFun () {
      if (this.drug_List.length === 0) return this.$toast.fail('请先选择药物类型或此药物列表为空')
      this.drugListShow = true
    },
    // 添加处方
    addDrug () {
      if (!this.prescription_params.drug_type) return this.$toast.fail('类型不能为空')
      if (!this.prescription_params.drug_name) return this.$toast.fail('药物名称不能为空')
      if (!this.prescription_params.drug_way) return this.$toast.fail('给药途径不能为空')
      if (!this.prescription_params.frequency) return this.$toast.fail('剂量及频率不能为空')
      this.show = false
      // this.isAdd = true //! 由于和接口逻辑出现问题 需要只有点击了新增的时候 才传递值 所以加变量主要用来控制回显的时候列表里的数据不传
      this.prescriptionList.push(this.prescription_params)
    },
    // 取消弹出键盘事件
    fieldSelect () {
      document.activeElement.blur()
    },
    // 新增
    add () {
      this.show = true
      // 清空弹框内的数据
      this.prescription_params = {}
      this.drugType() // 动态获取药物类型
    }
  }
}
</script>

<style scoped lang="less">
.container {
  height: 100vh;
}
.empty {
  width: 100%;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.content {
  padding: 20px 20px;
  padding-top: 54px;
  .add-btn {
    padding: 5px 20px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    border: none;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 10px;
    margin-right: 10px;
  }
  .list {
    font-size: 12px;
    padding-top: 10px;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px;
      box-sizing: border-box;
      border-radius: 10px;
      margin-top: 10px;
      border: 1px solid #3eb3ff;
      width: 100%;
    }
  }
}
/deep/.van-cell {
  line-height: 32px;
}
/deep/.van-cell__title {
  width: 70px;
  font-weight: 600;
}
/deep/.van-field__control {
  background-color: #eeeeee;
  padding-left: 10px;
  font-size: 14px;
  color: #a0a0a0;
  opacity: 0.8;
}
/deep/ .van-popup--bottom {
  width: 100% !important;
}
/deep/.van-popup {
  width: 80%;
  //  height: 358px;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
  .info {
    width: 100%;
    padding: 5px 25px 5px 10px;
    box-sizing: border-box;
    margin-top: 30px;
    border-bottom: 1px solid #eeeeee;
  }
  .ok {
    width: 30%;
    height: 32px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    border: none;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    border-radius: 16px;
    margin: 18px auto;
  }
}
</style>
